<template>
  <!--新闻页-->
<div>
  <div class="content padding250">
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>新闻中心
      </div>
    </div>
    <div class="auto">
      <!--<p class="titles">新闻中心</p>-->
        <div class="container clearfix font14">
          <ul class="new_list">
            <li class="clearfix" v-for="news in newsList">
              <a href="new_detail1.html" @click.prevent.stop="goNews(news.id)">
                <img src="../../assets/newsdefault.png" alt="" height="135" width="237" class="pull-left"  v-if="news.newsImg === '' || news.newsImg === undefined || news.newsImg === null">
                <img :src="news.newsImg" alt="" height="135" width="237" class="pull-left" v-else>
                <div>
                  <p class="title">{{news.messageTitle}}</p>
                  <p class="des" v-html="news.summary"></p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      <div class="pageout txt-center"><Page :total="total" :current="pageNumber" :page-size="size" @on-change="changePage"/></div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }
  .content{
    //background-color: #f5f5f5;
    text-align: left;
    /*.titles{*/
    /*font-size: 20px;*/
    /*color: #000;*/
    /*margin: 20px 0 25px 0;*/
    /*padding: 15px 20px ;*/
    /*background-color: #fff;*/
    /*}*/
    .container{
      background-color: #fff;
      padding: 0px 41px;
      line-height: 30px;
      .new_list .title {
        font-size: 16px;
        color: #333;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .new_list .des{
        font-size: 14px;
        color: #999;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .new_list li{
        border-bottom: 1px dashed #dbdbdb;
        padding-bottom: 30px;
        margin-bottom: 30px;
        div{
          padding: 0 42px 0 275px;
        }
      }
      .new_list li:last-child{
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
    .pageout{
      margin-top: 30px;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {newsList,sliderPC} from "../../http";

  export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              sliderImg:'',
              total:0,
              pageNumber:1,
              size:5,
              newsList:''
            };
        },
        methods: {
          //新闻详情
          goNews(newsId){
            this.$router.push({
              name:'newsdetail',
              query:{
                newsId:newsId
              }
            })
          },
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              newsList({pageNumber:this.pageNumber,pageSize:this.size}).then(res => {
                if(res.code === 200){
                  this.isSpinShow = false;
                  this.newsList = res.data.newsList.rows;
                  this.total = res.data.newsList.total;
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "新闻时讯提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            }
          },
          getNews(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //获取封面图
              sliderPC({sliderType:'7'}).then(res =>{
                this.sliderImg = res.data.slider.sliderImg;
              }).catch()
              newsList({pageNumber:1,pageSize:this.size}).then(res => {
                if(res.code === 200){
                  this.isSpinShow = false;
                  this.newsList = res.data.newsList.rows;
                  this.total = res.data.newsList.total;
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "新闻时讯提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            }
          }
        },
        created() {
          this.getNews();
        },
        components: {
          headers,
          footers,
          carousel
        }
    }
</script>
